<template>
   <div class="ratings" ref="ratings">
      <div class="ratings-content">
         <div class="overview">
            <div class="overview-left">
               <h1 class="score">{{seller.score}}</h1>
               <div class="title">综合评分</div>
               <div class="rank">高于周边商家{{seller.rankRate}}%</div>
            </div>
            <div class="overview-right">
               <div class="score-wrapper">
                  <span class="title">服务态度</span>
                  <star :size="36" :score="seller.serviceScore"></star>
                  <span class="score">{{seller.serviceScore}}</span>
               </div>
               <div class="score-wrapper">
                  <span class="title">商品评价</span>
                  <star :size="36" :score="seller.foodScore"></star>
                  <span class="score">{{seller.foodScore}}</span>
               </div>
               <div class="delivery-wrapper">
                  <span class="title">送达时间</span>
                  <span class="delivery">{{seller.deliveryTime}}分钟</span>
               </div>
            </div>
         </div>
     
      <split></split>
       <ratingselect :select-type="selectType" @toggle="tog" @change="cha"  :only-content="onlyContent" 
          :ratings="ratings"></ratingselect>
      <div class="rating-wrapper">
         <ul>
            <li v-for="(rating, index) in ratings" :key=index class="rating-item" v-show="needShow(rating.rateType, rating.text)">
               <div class="avatar">
                  <img width="28" height="28" :src="rating.avatar" alt="">
               </div>
               <div class="content">
                  <h1 class="name">{{rating.username}}</h1>
                  <div class="star-wrapper">
                     <star class="star" :size="24" :score='rating.score'></star>
                     <span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
                  </div>
                  <p class="text">{{rating.text}}</p>
                  <div class="recommend" v-show="rating.recommend && rating.recommend.length"></div>
                   <span :class="{'icon-thumb_up':rating.rateType ===0,
                          'icon-thumb_down': rating.rateType === 1 }"></span>
                  <span class="item" v-for="(item, index) in rating.recommend" :key=index>{{item}}</span>
               </div>
               <div class="time">
                  {{rating.rateTime | formatDate}}
               </div>
            </li>
         </ul>
      </div>
   </div>
    </div>
</template>
<script>
import star from '../star/star'
import split from '../split/split'
import BScroll from 'better-scroll'
import ratingselect from '../ratingselect/ratingselect'
import {formatDate} from '../../common/js/formatDate' 
const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2
export default {
    data() {
    return {
      ratings: [],
      selectType : ALL,
      onlyContent: true,
      
    };
  },
   methods:{
      cha(type) {
        this.selectType = type;
        this.$nextTick(() => {
            this.scroll.refresh()
        })
},
   needShow(type,text){
        if(this.onlyContent && !text){
            return false
        }
        if(this.selectType === ALL){
            return true
        }else{
            return type === this.selectType
        }
    } ,
    tog(val){
        this.onlyContent = val
        this.$nextTick(() => {
            this.scroll.refresh()
        })
    },
   },
   props: {
      seller:{
         type: Object
      } 
   },
   filters: {
      formatDate(time) {
          let date = new Date(time)
          return formatDate(date, 'yyyy-MM-dd hh-mm')
      }
  },
   created(){
      this.$http.get('/api/ratings').then((response) => {
         response = response.body
         if(response.errno === 0){
            this.ratings = response.data
            this.$nextTick(() => {

               this.scroll = new BScroll(this.$refs.ratings,{click: true})
            })
            
         }
      })
   },
   components: {
      star,
      split,
      ratingselect
   }
}
</script>
<style lang="stylus" rel="stylesheet/styles">
   @import '../../common/stylus/mixin.styl'
   .ratings
      position absolute
      top 174px   
      bottom 0
      left 0
      width 100%
      overflow hidden 
   .overview
      display flex
      padding 18px 0
      .overview-left
         flex 0 0 137px
         width 137px
         padding-bottom 6px 0
         border-right 1px solid rgba(7, 17,27, 0.1)
         text-align center
         @media only screen and (max-width 320px)
            flex 0 0 120px
         .score
            margin-bottom 6px
            line-height 28px
            font-size 24px
            color rgb(255, 153, 0)
         .title
            line-height 12px
            font-size 17px
            color rgb(7,17, 27)
            margin-bottom 5px
         .rank
            line-height 15px
            font-size 10px
            color gray
      .overview-right
         flex 1
         padding-left 16px 
         @media only screen and (max-width 320px)
            padding-left 6px
         .score-wrapper
            margin-bottom 8px
            line-height 18px
            font-size 0
            .title
               display inline-block
               vertical-align top
               line-height 18px
               font-size 12px
               color rbg(7, 17, 27)
            .star
               display inline-block
               margin 0 12px
            .score 
               display inline-block
               vertical-align top
               font-size 12px
               color rgb(255, 153, 0)

         .delivery-wrapper
            font-size 0
            .title
               font-size 18px
               font-size 12px
               color rgb(7, 17, 27)
            .delivery
               margin-left 12px
               font-size 12px
               color rgb(147, 153, 159)

   .rating-wrapper
      padding 0 18px
      .rating-item
         display flex
         padding 18px 0
         border-1px(rgba(7, 17, 27, 0.1))
         .avatar
            flex 0 0 28px
            width 28px
            margin-right 12px
            img 
               border-radius 50%
         .content
            position relative
            flex 1
            .name
               line-height 12px
               font-size 10px
               color rgb(7, 17, 27)
            .star-wrapper
               margin-bottom 6px
               font-size 0
               .star
                  display inline-block
                  margin-right top
                  vertical-align top
               .delivery
                  display inline-block
                  vertical-align top
                  line-height 12px
                  font-size 10px
                  color rgb(147, 153, 159)
            .text
               line-height 18px
               margin-bottom 8px
               color rgb(7, 17, 27)
               font-size 12px
            .recommend
               line-height 16px
               font-size 0
            .icon-thumb_up, .icon-thumb_up, .item
               display inline-block
               margin 0 8px 4px 0
               font-size 9px
            .icon-thumb_up
               color rgb(0, 160, 220)
            .item
               padding 0 6px
               border 1px solid rgba(7, 17, 27, 0.1)
               border-radius 1px
               color rgb(147,153, 159)
               background #fff
         .time
            position absolute
            top 0
            right 0
            line-height 12px
            font-size 10px
            color gray

                        

</style>
